<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀刘禅-王者荣耀官网网站-腾讯游戏</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 英雄详情页顶部开始 -->
    <div class="hero_top">
        <!-- 遮罩背景层开始 -->
        <div class="mask_bg">
            <div class="w">
                <!-- 左边介绍层开始 -->
                <div class="introduce">
                    <!-- 标题 -->
                    <h3 class="title">
                        <span class="title_name fl">天才门将</span>
                        <img src="images/shishi.png" class="shishi_img fl"/>
                    </h3>
                    
                    <!-- 英雄名称 -->
                    <div class="name">刘婵</div>

                    <!-- 英雄定位 -->
                    <div class="type"></div>

                    <!-- 视频层 -->
                    <a href="javascript:void(0)" class="video">
                        <span class="mask"></span>
                        <img src="images/mobileskin.jpg"/>
                        <span class="icon"></span>
                    </a>

                    <!-- 各方面分析 -->
                    <ul class="list">
                        <li>
                            <span class="text fl">生存能力</span>
                            <span class="bar fl">
                                <span class="icon"></span>
                                <i class="innerBar"></i>
                            </span>
                        </li>
                        <li>
                            <span class="text fl">攻击伤害</span>
                            <span class="bar fl">
                                <span class="icon" style="background-position:-30px -170px;"></span>
                                <i class="innerBar" style="width:30%;background:#e7ca63"></i>
                            </span>
                        </li>
                        <li>
                            <span class="text fl">技能效果</span>
                            <span class="bar fl">
                                <span class="icon" style="background-position:-60px -170px"></span>
                                <i class="innerBar" style="width:50%;background:#5dd473"></i>
                            </span>
                        </li>
                        <li>
                            <span class="text fl">上手难度</span>
                            <span class="bar fl">
                                <span class="icon" style="background-position:-90px -170px"></span>
                                <i class="innerBar" style="width:30%;background:#e84a33"></i>
                            </span>
                        </li>
                    </ul>

                    <!-- 按钮 -->
                    <div class="btns">
                        <a href="javascript:void(0);">英雄故事</a>
                        <a href="javascript:void(0);">历史上的ta</a>
                    </div>
                </div>
                <!-- 左边介绍层结束 -->
                
                <!-- 右边皮肤层开始 -->
                <div class="skins">
                    <ul class="fl">
                        <li>
                            <a href="javascript:void(0)">
                                <img src="images/smallskin01.jpg" class="current" data-name="天才门将" data-shishi="true"/>
                                <p>天才门将</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img src="images/smallskin02.jpg" data-name="绅士熊喵" data-shishi="true"/>
                                <p>绅士熊喵</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img src="images/smallskin03.jpg" data-name="英喵野望" data-shishi="false"/>
                                <p>英喵野望</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img src="images/smallskin04.jpg" data-name="暴走机关" data-shishi="false"/>
                                <p>暴走机关</p>
                            </a>
                        </li>
                    </ul>
                    
                    <span class="title fr">皮肤</span>

                </div>
                <!-- 右边皮肤层结束 -->
            </div>
        </div>
        <!-- 遮罩背景层开始 -->
    </div>
    <!-- 英雄详情页顶部结束 -->

    <!-- 路径开始 -->
    <div class="nav w">
        <span class="icon"></span><a href="#">王者荣耀首页</a><span class="right_arrow">&gt;</span><a href="#">英雄介绍</a><span class="right_arrow">&gt;</span><span class="current">刘禅</span>
    </div>
    <!-- 路径结束 -->

    <div class="block1 w">
        <!-- 技能介绍部分开始 -->
        <div class="jinengjieshao fl">
            <div class="title"><span class="icon"></span>技能介绍</div>
            <div class="content">
                <ul>
                    <li class="current"><img src="images/skill01.png"/></li>
                    <li><img src="images/skill02.png"/></li>
                    <li><img src="images/skill03.png"/></li>
                    <li><img src="images/skill04.png"/></li>
                </ul>

                <div class="skill_show">
                    <div class="show_list" style="display:block">
                        <p class="skill_name">
                            <b>磁力屏障</b>
                            <span>冷却值：0</span>
                            <span>消耗：0</span>
                        </p>
                        
                        <p class="skill_desc">被动：刘禅可对机关释放技能造成等量伤害，并且刘禅的控制效果可对机关造成干扰效果，持续1秒；当刘禅技能对机关造成伤害时会掠夺零件为自身回复200-396点生命值，回复效果随英雄等级成长。</p>
                    </div>

                    <div class="show_list">
                        <p class="skill_name">
                            <b>小霸王护盾</b>
                            <span>冷却值：10/9.4/8.8/8.2/7.6/7</span>
                            <span>消耗：50</span>
                        </p>
                        
                        <p class="skill_desc">刘禅立即重置普攻并开启护盾向前发起冲锋，吸收600/840/1080/1320/1560/1800点伤害同时提升自身25%移动速度持续3秒，并强化下一次普通攻击，造成350/400/450/500/550/600（+122%物理加成）点物理伤害并击飞敌人1秒。</p>
                    </div>

                    <div class="show_list">
                        <p class="skill_name">
                            <b>机关魔爪</b>
                            <span>冷却值：8</span>
                            <span>消耗：55</span>
                        </p>
                        
                        <p class="skill_desc">刘禅操纵机关熊猫向指定方向伸出魔爪进行攻击，对范围内的敌人造成400/480/560/640/720/800（+100%物理加成）点物理伤害并且会将范围内敌人眩晕1秒。</p>
                    </div>

                    <div class="show_list">
                        <p class="skill_name">
                            <b>暴走熊猫</b>
                            <span>冷却值：40/35/30</span>
                            <span>消耗：100</span>
                        </p>
                        
                        <p class="skill_desc">刘禅操纵机关熊猫展开双臂持续旋转攻击附近敌人，持续3秒；对方范围内的敌人每0.5秒造成240/320/400（+75%物理加成）点物理伤害。</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 技能介绍部分介绍 -->

        <!-- 铭文部分开始 -->
        <div class="mingwen fr">
            <div class="title"><span class="icon"></span>铭文搭配建议</div>
            <div class="content">
                <ul>
                    <li>
                        <img src="images/fuwen1.png"/>
                        <b>宿命</b>
                        <p>攻速加成+1%</p>
                        <p>最大生命+33.7</p>
                        <p>物理防御力+2.3</p>
                    </li>
                    <li>
                        <img src="images/fuwen2.png"/>
                        <b>虚空</b>
                        <p>最大生命+37.5</p>
                        <p>冷却缩减+0.6%</p>
                    </li>
                    <li>
                        <img src="images/fuwen3.png"/>
                        <b>调和</b>
                        <p>最大生命+45</p>
                        <p>生命回复+5.2</p>
                        <p>移速+0.4%</p>
                    </li>
                    
                </ul>
                <p class="tips">Tips：宿命增加刘禅的坦克能力；调和，配合1技能控制效果，可以黏住大多数核心输出；刘禅的技能有控制和拆塔的效果，虚空的冷却缩减可以起到加快拆塔速度的作用。</p>
            </div>
        </div>
        <!-- 铭文部分结束 -->
    </div>


    <div class="block2 w clearfix">
        <div class="left fl">
            <!-- 技能加点建议层开始 -->
            <div class="jinengjiadian">
                <div class="title"><span class="icon"></span>技能加点建议</div>
                <div class="content">
                    <p class="suggest">
                        <b>主升</b>
                        <span>小霸王护盾</span>
                    </p>

                    <p class="skill_img">
                        <img src="images/skill02.png"/>
                    </p>

                    <p class="suggest">
                        <b>副升</b>
                        <span>机关魔爪</span>
                    </p>

                    <p class="skill_img">
                        <img src="images/skill03.png"/>
                    </p>

                    <p class="suggest zhaohuan">
                        <b>召唤师技能</b>
                        <span>治疗术/晕眩</span>
                    </p>

                    <p class="skill_img">
                        <img src="images/zhaohuanskill01.jpg"/>
                    </p>

                    <p class="skill_img">
                        <img src="images/zhaohuanskill02.jpg"/>
                    </p>

                </div>
            </div>
            <!-- 技能加点建议层结束 -->
            
            <!-- 英雄关系开始 -->
            <div class="yingxiongguanxi">
                <div class="title"><span class="icon"></span>英雄关系</div>
                <div class="content">
                    <div class="tab_nav">
                        <ul>
                            <li class="current"><a href="javascript:void(0)">最佳搭档</a><span class="line"></span></li>
                            <li><a href="javascript:void(0)">压制英雄</a><span class="line"></span></li>
                            <li><a href="javascript:void(0)">被压制英雄</a></li>
                        </ul>
                    </div>

                    <div class="tab_content">
                        <div class="hero_info" style="display: block;">
                            <div class="hero_left fl">
                                <span class="icon fl"></span>
                                最佳搭档
                            </div>

                            <div class="hero_list fl">
                                <ul>
                                    <li>
                                        <a href="javascript:void(0)">
                                            <img src="images/huangzhong.jpg" class="current"/>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">
                                            <img src="images/gaojianli.jpg"/>
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <div class="hero_list_desc fr">
                                <p style="display: block;">黄忠：这两个英雄在一起玩的就是速推流。刘禅的被动和一二技能的干扰，加上大招对塔的高额伤害，配上黄忠的炮台，能够以极短的时间推掉一座防御塔。并且刘禅的一二技能控制时间较长，能够很好的保护好黄忠，敌人在黄忠的大招圈内越久受到的伤害越高。</p>
                                <p>高渐离：刘禅和高渐离可以产生很好的联动，刘禅的控制技能比较多，在用一技能配合二技能时不光可以开团，也可以干扰防御塔无法攻击，高渐离可以直接大招进场，释放出高额的爆发输出击杀对方英雄，是正面开团和越塔强杀的利器。</p>
                            </div>
                        </div>
                        
                        <div class="hero_info">
                            <div class="hero_left fl">
                                <span class="icon fl" style="background-position: -34px -34px;"></span>
                                压制英雄
                            </div>

                            <div class="hero_list fl">
                                <ul>
                                    <li>
                                        <a href="javascript:void(0)">
                                            <img src="images/ake.jpg" class="current"/>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">
                                            <img src="images/luban.jpg"/>
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <div class="hero_list_desc fr">
                                <p style="display: block;">阿轲：当前版本的阿轲多是刺客玩法，出装偏向输出摆法型，攻击力高的同时身板也很脆，当阿轲隐身突进结束，将会面对刘禅2秒左右的控制，在这两秒的时间内刘禅可以配合队友对阿轲进行毁灭性打击。即使阿轲隐身寻找机会切入己方核心输出位，刘禅也可以站在己方输出位利用1技能和2技能的连控轻松保护己方输出。</p>
                                <p>鲁班：刘禅可以利用技能控制效果轻松打断鲁班扫射，鲁班的被动效果承担了鲁班大部分的输出，每次鲁班在扫射被动时，刘禅都可以用1技能配合2技能轮次打断，使鲁班输出最低化，而且鲁班的技能CD比刘禅长，鲁班在被刘禅这样的坦克贴脸时，很难打出有效伤害，合理的使用技能甚至可以轻松把鲁班击杀。</p>
                            </div>
                        </div>

                        <div class="hero_info">
                            <div class="hero_left fl">
                                <span class="icon fl"  style="background-position: -64px -34px;"></span>
                                被压制英雄
                            </div>

                            <div class="hero_list fl">
                                <ul>
                                    <li>
                                        <a href="javascript:void(0)">
                                            <img src="images/hanxin.jpg" class="current"/>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">
                                            <img src="images/diaochan.jpg"/>
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <div class="hero_list_desc fr">
                                <p style="display: block;">刘禅很害怕孤军作战，所以单独遇到输出型刺客会被一顿暴打</p>
                                <p>由于灵活的貂蝉附带真实伤害，使得刘禅的控制技能不容易控制到貂蝉</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 英雄关系结束 -->
        </div>

        <div class="right chuzhuangjianyi fr">
            <div class="title"><span class="icon"></span>出装建议</div>

            <div class="content">
                <div class="tab_nav">
                    <ul>
                        <li class="current"><a href="javascript:void(0)">推荐出装一</a><span class="line"></span></li>
                        <li><a href="javascript:void(0)">推荐出装二</a></li>
                    </ul>
                </div>
                <div class="tab_content">

                    <div class="equips_info show">
                        <div class="equips">
                            <div class="equip_img">
                                <img src="images/救赎之翼.jpg"/>
                                <!-- 装备详情 -->
                                <!-- <div class="detail">
                                    <div class="detail_title">
                                        <img src="images/救赎之翼.jpg" class="fl"/>

                                        <div class="cons">
                                            <h4>救赎之翼</h4>
                                            <p>售价：1080</p>
                                            <p>总价：1800</p>
                                        </div>
                                    </div>

                                    <div class="detail_desc">
                                        <p>+10%移动速度<br/>+1000最大生命</p>
                                        <p>唯一被动-解放：拔除其他装备中的奉献效果，周围小兵和野怪死亡后你可以与队友平分收益。<br>唯一被动-恩赐：如果自己的经验或经济是己方最低，每3秒会额外获得5点经验或金币<br>唯一主动-救援：立即为周围友方英雄（包括自己）提供一个吸收（600+60*英雄等级）伤害的护盾，持续3秒，冷却时间：60秒。所有同CD辅助装备的主动技能均为全队共享冷却时间</p>
                                    </div>
                                </div> -->
                            </div>
                            <div class="equip_img">
                                <img src="images/抵抗之靴.jpg"/>
                            </div>
                            <div class="equip_img">
                                <img src="images/极寒风暴.jpg"/>
                            </div>
                            <div class="equip_img">
                                <img src="images/魔女斗篷.jpg"/>
                            </div>
                            <div class="equip_img">
                                <img src="images/不祥征兆.jpg"/>
                            </div>
                            <div class="equip_img">
                                <img src="images/贤者的庇护.jpg"/>
                            </div>
                        </div>
                        <p class="tips">Tips：刘禅通常会与敌人贴身肉搏，极寒风暴能提供高额的冷却缩减并且让刘禅的生存得到提升，还能造成伤害制造威胁让对手进退两难</p>
                    </div>

                    <div class="equips_info">
                        <div class="equips">
                            <div class="equip_img">
                                <img src="images/红莲斗篷.jpg"/>
                            </div>
                            <div class="equip_img">
                                <img src="images/抵抗之靴.jpg"/>
                            </div>
                            <div class="equip_img">
                                <img src="images/反伤刺甲.jpg"/>
                            </div>
                            <div class="equip_img">
                                <img src="images/魔女斗篷.jpg"/>
                            </div>
                            <div class="equip_img">
                                <img src="images/不祥征兆.jpg"/>
                            </div>
                            <div class="equip_img">
                                <img src="images/贤者的庇护.jpg"/>
                            </div>
                        </div>
                        <p class="tips">Tips：当对手射手比较强势时，选择反伤刺甲进行反制，由于控制技能冷却较短，贤者的庇护还能提供第二套控制的机会</p>
                    </div>

                </div>
            </div>

        </div>
    </div>

    <script>
        // 功能1: 皮肤切换
        // 获取对象
        var imgs        = document.querySelectorAll(".skins img");
        var title_name  = document.querySelector(".title_name");
        var shishi_img  = document.querySelector(".shishi_img");
        var hero_top = document.querySelector(".hero_top");
        
        // 当前索引号
        var index = 0;

        // 循环遍历
        for(var i = 0; i<imgs.length;i++){
            // 设置自定义属性
            imgs[i].setAttribute("data-index" , i);

            // 绑定事件
            imgs[i].onmouseover = function(){
                // 删除index变量值对应img标签的class属性
                imgs[index].removeAttribute("class");

                // 添加current类
                this.className = "current";

                // 设置index变量的值为当前下标值
                index = Number( this.getAttribute("data-index") );

                title_name.innerHTML = this.getAttribute("data-name");

                if( this.getAttribute("data-shishi") == "true" ){
                    shishi_img.style.display = "block";
                }else{
                    shishi_img.style.display = "none";
                }

                hero_top.style.backgroundImage = "url(images/bigskin0"+(index+1)+".jpg)";
            }
        }

        // 功能2: 技能介绍切换
        // 获取对象
        var jinengLis  = document.querySelectorAll(".jinengjieshao .content ul li");
        var show_lists = document.querySelectorAll(".show_list");

        for(var i = 0; i < jinengLis.length; i++ ){
            jinengLis[i].setAttribute("data-index",i);
            jinengLis[i].onmouseover = function(){
                document.querySelector(".jinengjieshao .content ul li.current").removeAttribute("class");
                this.className = "current";

                for(var j = 0; j < show_lists.length; j++){
                    show_lists[j].style.display = "none";
                }

                var index = this.getAttribute("data-index");
                show_lists[index].style.display = "block";
            }
        }

        // 功能3: 英雄关系切换
        var tab_navLis = document.querySelectorAll(".yingxiongguanxi .tab_nav ul li");
        var hero_infos = document.querySelectorAll(".yingxiongguanxi .tab_content .hero_info");
        for( var i = 0; i < tab_navLis.length; i++){
            tab_navLis[i].setAttribute("data-index" , i);
            tab_navLis[i].onmouseover = function(){
                for(var j = 0; j < tab_navLis.length; j++){
                    tab_navLis[j].removeAttribute("class");
                    hero_infos[j].style.display = "none";
                }
                this.className = "current";
                
                var index = this.getAttribute("data-index");
                hero_infos[index].style.display = "block";
            }
        }

        // 功能4: 英雄描述切换
        var hero_info1Imgs = document.querySelectorAll(".hero_info:nth-child(1) .hero_list img");
        var hero_info1Ps = document.querySelectorAll(".hero_info:nth-child(1) .hero_list_desc p");
        for(var i = 0;i < hero_info1Imgs.length;i++){
            hero_info1Imgs[i].setAttribute("data-index" , i);
            hero_info1Imgs[i].onmouseover = function(){

                for( var j = 0; j<hero_info1Imgs.length; j++){
                    hero_info1Imgs[j].removeAttribute("class");
                    hero_info1Ps[j].style.display = "none";
                }

                this.className = "current";
                
                var index = this.getAttribute("data-index");
                hero_info1Ps[index].style.display = "block";
            }
        }

        var hero_info2Imgs = document.querySelectorAll(".hero_info:nth-child(2) .hero_list img");
        var hero_info2Ps = document.querySelectorAll(".hero_info:nth-child(2) .hero_list_desc p");
        for(var i = 0;i < hero_info2Imgs.length;i++){
            hero_info2Imgs[i].setAttribute("data-index" , i);
            hero_info2Imgs[i].onmouseover = function(){

                for( var j = 0; j<hero_info2Imgs.length; j++){
                    hero_info2Imgs[j].removeAttribute("class");
                    hero_info2Ps[j].style.display = "none";
                }

                this.className = "current";
                
                var index = this.getAttribute("data-index");
                hero_info2Ps[index].style.display = "block";
            }
        }

        var hero_info3Imgs = document.querySelectorAll(".hero_info:nth-child(3) .hero_list img");
        var hero_info3Ps = document.querySelectorAll(".hero_info:nth-child(3) .hero_list_desc p");
        for(var i = 0;i < hero_info3Imgs.length;i++){
            hero_info3Imgs[i].setAttribute("data-index" , i);
            hero_info3Imgs[i].onmouseover = function(){

                for( var j = 0; j<hero_info3Imgs.length; j++){
                    hero_info3Imgs[j].removeAttribute("class");
                    hero_info3Ps[j].style.display = "none";
                }

                this.className = "current";
                
                var index = this.getAttribute("data-index");
                hero_info3Ps[index].style.display = "block";
            }
        }


        // 功能5: 动态生成装备详情信息
        // 装备数据
        var equipData = [
            {
                "ename":"救赎之翼",
                "eprice":"售价：1080",
                "etprice":"总价：1800",
                "attr":"+10%移动速度<br/>+1000最大生命",
                "ability":"唯一被动-解放：拔除其他装备中的奉献效果，周围小兵和野怪死亡后你可以与队友平分收益。<br>唯一被动-恩赐：如果自己的经验或经济是己方最低，每3秒会额外获得5点经验或金币<br>唯一主动-救援：立即为周围友方英雄（包括自己）提供一个吸收（600+60*英雄等级）伤害的护盾，持续3秒，冷却时间：60秒。所有同CD辅助装备的主动技能均为全队共享冷却时间"
            },{
                "ename":"抵抗之靴",
                "eprice":"售价：426",
                "etprice":"总价：710",
                "attr":"+110法术防御",
                "ability":"唯一被动：+60移动速度（所有鞋类装备的移速加成效果不叠加）<br>唯一被动：+35%韧性"
            },{
                "ename":"极寒风暴",
                "eprice":"售价：1260",
                "etprice":"总价：2100",
                "attr":"+20%冷却缩减<br/>+500最大法力<br/>+360物理防御",
                "ability":"唯一被动-冰心：受到单次伤害超过当前生命值10%时触发寒冰冲击，对周围敌人造成（50+英雄等级*10）点法术伤害并降低其30%攻击和移动速度，持续2秒，这个效果有2秒内置CD"
            },{
                "ename":"魔女斗篷",
                "eprice":"售价：1272",
                "etprice":"总价：2120",
                "attr":"+360法术防御<br/>+1000最大生命",
                "ability":"唯一被动-迷雾：脱战3秒后获得一个吸收（200+英雄等级*120）点法术伤害的护盾"
            },{
                "ename":"不祥征兆",
                "eprice":"售价：1308",
                "etprice":"总价：2180",
                "attr":"+270物理防御<br/>+1200最大生命",
                "ability":"唯一被动-寒铁：受到攻击会减少攻击者30%攻击速度与15%移动速度，持续3秒"
            },{
                "ename":"贤者的庇护",
                "eprice":"售价：1248",
                "etprice":"总价：2080",
                "attr":"+140物理防御<br/>+140法术防御",
                "ability":"唯一被动-复生：死亡后2秒原地复活，并获得（2000+英雄等级*100）点生命值，冷却时间：150秒。这个效果每局游戏只能触发2次"
            },{
                "ename":"红莲斗篷",
                "eprice":"售价：1098",
                "etprice":"总价：1830",
                "attr":"+240物理防御<br/>+1000最大生命",
                "ability":"唯一被动-献祭：每秒对身边300范围内的敌人造成使用者最大生命值2%的法术伤害"
            },{
                "ename":"抵抗之靴",
                "eprice":"售价：426",
                "etprice":"总价：710",
                "attr":"+110法术防御",
                "ability":"唯一被动：+60移动速度（所有鞋类装备的移速加成效果不叠加）<br>唯一被动：+35%韧性"
            },{
                "ename":"反伤刺甲",
                "eprice":"售价：1104",
                "etprice":"总价：1840",
                "attr":"+40物理攻击<br/>+420物理防御",
                "ability":"唯一被动-荆棘：受到物理伤害时，会将伤害量的20%以法术伤害的形式回敬给对方。自身每20点物理防御属性提升1%该伤害（最多+100%）。攻击者距离越远，这个伤害越低，最多在距离800时衰减至70%"
            },{
                "ename":"魔女斗篷",
                "eprice":"售价：1272",
                "etprice":"总价：2120",
                "attr":"+360法术防御<br/>+1000最大生命",
                "ability":"唯一被动-迷雾：脱战3秒后获得一个吸收（200+英雄等级*120）点法术伤害的护盾"
            },{
                "ename":"不祥征兆",
                "eprice":"售价：1308",
                "etprice":"总价：2180",
                "attr":"+270物理防御<br/>+1200最大生命",
                "ability":"唯一被动-寒铁：受到攻击会减少攻击者30%攻击速度与15%移动速度，持续3秒"
            },{
                "ename":"贤者的庇护",
                "eprice":"售价：1248",
                "etprice":"总价：2080",
                "attr":"+140物理防御<br/>+140法术防御",
                "ability":"唯一被动-复生：死亡后2秒原地复活，并获得（2000+英雄等级*100）点生命值，冷却时间：150秒。这个效果每局游戏只能触发2次"
            }
        ]
        var equip_imgs = document.querySelectorAll(".equip_img");
        for( var i = 0; i< equip_imgs.length; i++ ){
            var equipDetailStr = `<div class="detail">
                <div class="detail_title">
                    <img src="images/${equipData[i].ename}.jpg" class="fl"/>

                    <div class="cons">
                        <h4>${equipData[i].ename}</h4>
                        <p>${equipData[i].eprice}</p>
                        <p>${equipData[i].etprice}</p>
                    </div>
                </div>

                <div class="detail_desc">
                    <p>${equipData[i].attr}</p>
                    <p>${equipData[i].ability}</p>
                </div>
            </div>`;

            equip_imgs[i].insertAdjacentHTML("beforeend" , equipDetailStr);
        }

        // 功能6: 推荐出装切换
        var chuzhuangLis = document.querySelectorAll(".chuzhuangjianyi .tab_nav ul li");

        var chuzhuangEquips_infos = document.querySelectorAll(".chuzhuangjianyi .tab_content .equips_info");
        
        for(var i = 0; i<chuzhuangLis.length; i++ ){
            chuzhuangLis[i].setAttribute("data-index",i);
            chuzhuangLis[i].onmouseover = function(){
                for(var j = 0; j<chuzhuangLis.length;j++ ){
                    chuzhuangLis[j].removeAttribute("class");
                    chuzhuangEquips_infos[j].className = "equips_info";
                }

                this.className = "current";
                var index = this.getAttribute("data-index");
                chuzhuangEquips_infos[index].className = "equips_info show";
            }
        }
    </script>
</body>
</html>